import dayjs from "dayjs";
import { message } from "@/utils/message";
import { ElMessageBox } from "element-plus";
import {
  words_cate_list,
  words_list,
} from "@/api/words";
import { type Ref, reactive, ref, onMounted, h, toRaw } from "vue";
import type { PaginationProps } from "@pureadmin/table";
import { deviceDetection } from "@pureadmin/utils";

export function useRole(scriptInfoRef: Ref) {
  /** 目录相关 */
  const cateLoading = ref(false);
  const catalogueList = ref([])
  // 获取话术分类
  async function getWordsCateListFn() {
    cateLoading.value = true;
    const result = await words_cate_list({
      page: 1,
      pagesize: 999
    });
    if (result.data.length) {
      let cateList = result.data;
      catalogueList.value = cateList;
      form.id = cateList[0].id;
      onSearch();
    } else {
      setTimeout(() => {
        loading.value = false;
      }, 500);
    }
    setTimeout(() => {
      cateLoading.value = false;
    }, 500);
  }

  // 切换产品分类
  function changeCateId(item) {
    form.id = item.id;
    onSearch();
  }

  /** 列表相关 start */
  const form = reactive({
    id: null,
    page: 1,
    pagesize: 10
  });
  const dataList = ref([]);
  const loading = ref(true);
  const pagination = reactive<PaginationProps>({
    total: 0,
    pageSize: 10,
    currentPage: 1,
    background: true
  });
  const columns: TableColumnList = [
    {
      label: "id",
      prop: "id",
      minWidth: 80
    },
    {
      label: "标题",
      prop: "title",
      minWidth: 200
    },
    {
      label: "内容",
      prop: "content",
      minWidth: 350,
    },
    {
      label: "所属目录",
      prop: "cateId",
      minWidth: 180,
      formatter: ({ cateId }) => catalogueList.value.filter(item => item.id == cateId)[0].name
    },
    {
      label: "创建时间",
      prop: "created_at",
      minWidth: 180,
      formatter: ({ created_at }) => dayjs.unix(created_at).format("YYYY-MM-DD HH:mm:ss")
    },
    {
      label: "创建人",
      prop: "created_by",
      minWidth: 100,
    },
    {
      label: "修改时间",
      prop: "updated_at",
      minWidth: 180,
      formatter: ({ updated_at }) => updated_at ? dayjs.unix(updated_at).format("YYYY-MM-DD HH:mm:ss") : ''
    },
    {
      label: "修改人",
      prop: "updated_by",
      minWidth: 100,
    },
    {
      label: "查看",
      fixed: "right",
      slot: "look"
    }
  ];

  function handleSizeChange(val: number) {
    form.pagesize = val
    pagination.pageSize = val
    onSearch(); // 刷新表格数据
  }

  function handleCurrentChange(val: number) {
    form.page = val
    pagination.currentPage = val
    onSearch(); // 刷新表格数据
  }

  function handleOffline(row) {
    message(`${row.username}已被强制下线`, { type: "success" });
    onSearch();
  }

  async function onSearch() {
    loading.value = true;
    const result = await words_list(toRaw(form));

    dataList.value = result.data;
    pagination.total = result.count;

    setTimeout(() => {
      loading.value = false;
    }, 500);
  }

  // 查看话术
  function lookScript(row) {
    let item = JSON.parse(JSON.stringify(row))
    item.type = catalogueList.value.filter(item => item.id == row.cateId)[0].name
    scriptInfoRef.value.openDrawer(item)
  }

  onMounted(() => {
    getWordsCateListFn();
  });

  return {
    cateLoading,
    catalogueList,
    changeCateId,

    form,
    loading,
    columns,
    dataList,
    pagination,
    deviceDetection,

    onSearch,
    handleOffline,
    handleSizeChange,
    handleCurrentChange,
    lookScript
  };
}
